<div class="modal-header">
  <div class="modal-title">{{record ? '编辑' : '新建'}}</div>
</div>

<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>

<div *ngIf="i">
  <form nz-form [formGroup]="validateForm">
    <input nz-input hidden formControlName="id"/>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="name">名称</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="名称必填！">
            <input nz-input formControlName="name" placeholder="名称"/>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="name">类型</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="类型必填！">
            <nz-select
              nzPlaceHolder="请选择..."
              nzAllowClear
              nzShowSearch
              nzServerSearch
              formControlName="type_id">
              <ng-container *ngFor="let type of typeOptionList">
                <nz-option *ngIf="!isLoading" [nzValue]="type.id" [nzLabel]="type.name"></nz-option>
              </ng-container>
              <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="remarks">备注</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <textarea nz-input [rows]="3" placeholder="报销备注"
                      formControlName="remarks"></textarea>
          </nz-form-control>
        </nz-form-item>
      </div>

      <nz-divider></nz-divider>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzFor="description">明细</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-table *ngIf="details.length" formArrayName="details" style="margin-bottom: 8px;"
                      nzBordered nzSize="small" [nzData]="details.value" [nzShowPagination]="false">
              <thead>
              <tr>
                <th nzAlign="center">项目</th>
                <th nzAlign="center">金额</th>
                <th nzAlign="center">发生日期</th>
                <th nzAlign="center">备注</th>
                <th nzAlign="center">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of details.controls; let k = index" [formGroupName]="k">
                <input type="hidden" nz-input formControlName="id"/>
                <td nzAlign="center">
                  <span *ngIf="editIndex !== k">{{ projects[details.value[k].project_id] }}</span>
                  <span *ngIf="editIndex === k" nz-form-control nzErrorTip="项目必填！">
                    <nz-select style="width: 120px"
                               nzPlaceHolder="请选择..." nzAllowClear nzShowSearch nzServerSearch
                               formControlName="project_id">
                      <ng-container *ngFor="let project of projectOptionList">
                        <nz-option *ngIf="!isLoading" [nzValue]="project.id" [nzLabel]="project.name"></nz-option>
                      </ng-container>
                      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> 加载中...
                      </nz-option>
                    </nz-select>
                  </span>
                </td>
                <td nzAlign="center">
                  <span *ngIf="editIndex !== k">{{ details.value[k].amount }}</span>
                  <span *ngIf="editIndex === k" nz-form-control nzErrorTip="金额必填！">
                    <input [type]="'number'" [step]="0.01" nz-input formControlName="amount" placeholder="金额"/>
                  </span>
                </td>
                <td nzAlign="center">
                  <span *ngIf="editIndex !== k">{{ details.value[k].date | date: 'yyyy-MM-dd' }}</span>
                  <span *ngIf="editIndex === k" nz-form-control nzErrorTip="发生日期必填！">
                    <nz-date-picker formControlName="date"></nz-date-picker>
                  </span>
                </td>

                <td nzAlign="center">
                  <span *ngIf="editIndex !== k">{{ details.value[k].remarks }}</span>
                  <span *ngIf="editIndex === k" nz-form-control>
                    <textarea nz-row="2" nz-input formControlName="remarks" placeholder="备注"></textarea>
                  </span>
                </td>

                <td nzAlign="center">
                  <span *ngIf="editIndex !== k">
                    <a (click)="editDetail(k)">编辑</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a nz-popconfirm nzPopconfirmTitle="是否要删除此行？" (nzOnConfirm)="delDetail(k)">删除</a>
                  </span>
                  <span *ngIf="editIndex === k">
                    <a (click)="saveDetail(k)">保存</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a nz-popconfirm nzPopconfirmTitle="是否要取消操作？" (nzOnConfirm)="cancelDetail(k)">取消</a>
                  </span>
                </td>
              </tr>
              </tbody>
            </nz-table>
            <button *ngIf="editIndex === -1" nz-button [nzType]="'dashed'" (click)="addDetail()" nzBlock>
              <i nz-icon nzType="plus"></i>
              <span>新增</span>
            </button>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>
  </form>
</div>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="submit" nzType="dashed" (click)="save(validateForm.value)" [disabled]="!validateForm.valid"
          [nzLoading]="http.loading">暂存
  </button>
  <button nz-button type="submit" nzType="primary"
          (click)="submit(validateForm.value)" [disabled]="!validateForm.valid" [nzLoading]="http.loading">提审
  </button>
</div>
